<script setup>
import { ArrowDown } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
let routers = useRouter()
// 语言
let item1 = ref(['中文(简体)', '中文(繁体)', 'English', 'Azərbaycan dili', 'Bahasa Indonesia', 'Català', 'Български'])
let btnvalue1 = ref('中文(简体)')
let fn1 = (index) => {
    btnvalue1.value = item1.value[index]
    console.log(item1.value[index]);
}

// 货币
let item2 = ref(['人民币', '港币', '美元', '英镑', '欧元'])
let btnvalue2 = ref('人民币')
let fn2 = (index) => {
    btnvalue2.value = item2.value[index]
    console.log(item2.value[index]);
}

// 时区
let item3 = ref(['(GMT-11:00) International Date Line West', '(GMT+08:00) Beijing', '(GMT+07:00) Novosibirsk', '(GMT+06:00) Almaty'])
let btnvalue3 = ref('(GMT+08:00) Beijing')
let fn3 = (index) => {
    btnvalue3.value = item3.value[index]
    console.log(item3.value[index]);
}

// 返回账户页面
let toaccount = () => {
    routers.push('/account')
}
</script>

<template>
    <div class="container">
        <!-- 标题 -->
        <div class="top-box">
            <div class="toptext">
                <span id="toaccount" @click="toaccount">账号</span>
                <svg viewBox="0 0 18 18" role="presentation" aria-hidden="true" focusable="false"
                    style="height: 10px; width: 10px; fill: rgb(118, 118, 118);">
                    <path d="m4.29 1.71a1 1 0 1 1 1.42-1.41l8 8a1 1 0 0 1 0 1.41l-8 8a1 1 0 1 1 -1.42-1.41l7.29-7.29z"
                        fill-rule="evenodd"></path>
                </svg>
                <span id="right">全局偏好</span>
            </div>
            <div class="bottomtext">全局偏好</div>
        </div>

        <!-- 内容 -->
        <div class="content-box">
            <div class="setting">
                <!-- 语言选择 -->
                <div class="langbox">
                    <div class="txt">首选语言</div>
                    <el-dropdown trigger="click">
                        <el-button type="primary">
                            {{btnvalue1}}<el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item v-for="(el,index) in item1" @click="fn1(index)">{{el}}
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
                <!-- 货币选择 -->
                <div class="moneybox">
                    <div class="txt">首选货币</div>
                    <el-dropdown trigger="click">
                        <el-button type="primary">
                            {{btnvalue2}}<el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item v-for="(el,index) in item2" @click="fn2(index)">{{el}}
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
                <!-- 时区选择 -->
                <div class="timebox">
                    <div class="txt">时区</div>
                    <el-dropdown trigger="click">
                        <el-button type="primary">
                            {{btnvalue3}}<el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item v-for="(el,index) in item3" @click="fn3(index)">{{el}}
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>

            <div class="window">
                <svg viewBox="0 0 24 24" role="presentation" aria-hidden="true" focusable="false"
                    style="height: 40px; width: 40px; display: block; fill: rgb(255, 180, 0);">
                    <path
                        d="m21.31 5.91a1.31 1.31 0 1 1 -1.31-1.31 1.31 1.31 0 0 1 1.31 1.31zm-8.31 9.69a1.31 1.31 0 1 0 1.31 1.31 1.31 1.31 0 0 0 -1.31-1.31zm-7-11a1.31 1.31 0 1 0 1.31 1.31 1.31 1.31 0 0 0 -1.31-1.31z">
                    </path>
                    <path
                        d="m22 6.5a2.5 2.5 0 0 1 -2 2.45v13.55a.5.5 0 0 1 -1 0v-13.55a2.5 2.5 0 0 1 0-4.9v-2.55a.5.5 0 0 1 1 0v2.56a2.44 2.44 0 0 1 .33.09.5.5 0 0 1 -.33.94h-.01a1.45 1.45 0 0 0 -.99.01 1.49 1.49 0 0 0 0 2.82 1.4 1.4 0 0 0 1 0 1.5 1.5 0 0 0 1-1.41 1.48 1.48 0 0 0 -.09-.52.5.5 0 0 1 .94-.35 2.5 2.5 0 0 1 .16.87zm-7.8 9.83a.5.5 0 0 0 -.29.64 1.48 1.48 0 0 1 .09.52 1.5 1.5 0 0 1 -1 1.41 1.4 1.4 0 0 1 -1 0 1.49 1.49 0 0 1 0-2.82 1.48 1.48 0 0 1 .5-.09 1.52 1.52 0 0 1 .5.08h.01a.5.5 0 0 0 .32-.94 2.46 2.46 0 0 0 -.32-.08v-13.56a.5.5 0 0 0 -1 0v13.55a2.5 2.5 0 0 0 0 4.9v2.55a.5.5 0 0 0 1 0v-2.55a2.5 2.5 0 0 0 1.84-3.32.5.5 0 0 0 -.64-.29zm-7-11a .5.5 0 0 0 -.29.64 1.48 1.48 0 1 1 -1.41-.98 1.47 1.47 0 0 1 .49.08h.01a.5.5 0 0 0 .33-.94 2.44 2.44 0 0 0 -.33-.09v-2.56a.5.5 0 0 0 -1 0v2.55a2.5 2.5 0 0 0 0 4.9v13.55a.5.5 0 0 0 1 0v-13.55a2.5 2.5 0 0 0 1.84-3.32.5.5 0 0 0 -.64-.29z"
                        fill="#484848"></path>
                </svg>
                <div class="window-title">您的全局偏好</div>
                <p>更改货币后您将看到新的价格 您可以在收款偏好和付款偏好中更改收款方式</p>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
// 下拉菜单
.example-showcase .el-dropdown+.el-dropdown {
    margin-left: 15px;
}

.el-button--primary {
    --el-button-text-color: var(--el-color-white);
    --el-button-bg-color: rgb(0, 132, 137);
    --el-button-border-color: rgb(0, 132, 137);
    --el-button-outline-color: rgb(0, 132, 137);
    --el-button-active-color: rgb(0, 132, 137);
    --el-button-hover-text-color: var(--el-color-white);
    --el-button-hover-link-text-color: var(--el-color-primary-light-5);
    --el-button-hover-bg-color: rgba(0, 132, 137, .9);
    --el-button-hover-border-color: rgb(0, 132, 137);
    --el-button-active-bg-color: rgb(0, 132, 137);
    --el-button-active-border-color: rgb(0, 132, 137);
    --el-button-disabled-text-color: var(--el-color-white);
    --el-button-disabled-bg-color: var(--el-color-primary-light-5);
    --el-button-disabled-border-color: var(--el-color-primary-light-5);
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}

.container {
    margin: 0 auto;
    width: 68%;
    color: rgb(72, 72, 72);

    .top-box {
        margin-bottom: 50px;

        .toptext {
            font-size: 14px;
            font-weight: 600;

            #toaccount:hover {
                text-decoration: underline;
                cursor: pointer;
            }

            span {
                margin: 10px;
                margin-left: 0;
            }

            #right {
                margin-left: 10px;
            }
        }

        .bottomtext {
            font-size: 32px;
            font-weight: 800;
            margin: 10px;
            margin-left: 0;
        }
    }

    .content-box {
        // border: 1px solid #000;
        display: flex;
        justify-content: space-between;
        width: 100%;

        .txt {
            font-size: 16px;
            font-weight: 600;
            color: #484848;
            margin-right: 330px;
        }

        .setting {
            .langbox {
                display: flex;
                justify-content: space-between;
                margin-bottom: 20px;
            }

            .moneybox {
                display: flex;
                justify-content: space-between;
                margin-bottom: 20px;
                border-top: 1px solid rgb(228, 228, 228);
                border-bottom: 1px solid rgb(228, 228, 228);
                padding: 20px 0;
                height: 60px;
                line-height: 60px;
                align-items: center;
            }

            .timebox {
                display: flex;
                justify-content: space-between;
                margin-bottom: 20px;
                margin-top: 40px;
            }
        }

        .window {
            border: 1px solid rgb(228, 228, 228);
            width: 290px;
            height: 160px;
            padding: 20px;

            .window-title {
                font-size: 18px;
                font-weight: 800;
                color: #484848;
                margin-top: 20px;
            }
        }
    }
}
</style>